<template>
	<view class="wraper">
		<view class="title" @click="back">
			<uni-icons type="back" size="22" style="margin-left: 20rpx;"></uni-icons>
			<text>养花大全</text>
		</view>
		<view class="header">
			<image src="../../static/QQ图片20230103165113.jpg" mode=""></image>
			<text>花花-花卉师</text>
			<view>在线咨询</view>
		</view>
		<view class="content">
			<text class="ttitle">{{items.lunchTitle}}</text>
			<view class="head">
				<image src="../../static/QQ图片20230103165113.jpg" mode=""></image>
				<view class="tttitle">
					<view>今天吃饭了吗</view>
					<view>{{items.lunchTime}}</view>
				</view>
				<view class="guanzhu">关注</view>
			</view>
			<view class="text1">
				<text>来自</text>
				<text>{{items.lunchLabel}}</text>
				<text>模块</text>
			</view>
			<view class="text2">{{items.lunchCont}}</view>
			<view class="images">
				<image :src="items.imgData" mode=""></image>
				<!-- <image src="../../static/1.jpg" mode=""></image>
				<image src="../../static/2.jpg" mode=""></image>
				<image src="../../static/3.jpg" mode=""></image> -->
			</view>
		</view>
		<view class="bottom">
			<view class="header">
				<text>全部回复</text>
			</view>
			<view class="item" v-for="v in message">
				<view class="head">
					<image :src="imageUrl+v.avatarPath"></image>
					<view class="tttitle">
						<view>{{v.nickName}}</view>
						<view>{{v.msgTime}}</view>
					</view>
				</view>
				<text style="font-size: 30rpx;padding:0 30rpx;">{{v.msgCont}}</text> 
				<view class="bottomm">
					<text>暂无回复</text>
					<uni-icons type="heart" size="18" style="margin-left: 200rpx;"></uni-icons>
					<text >111</text>
					<uni-icons type="chat-filled" size="18"></uni-icons>
					<text >999</text>
				</view>
			</view>
			<view style="border-top: 1rpx solid #cfcfcf;text-align: center;font-size: 30rpx;height: 100rpx;color:#cfcfcf ;">
				-喂喂，你滑到底啦-
			</view>
		</view>
		<view class="add">
			<input type="text" name="" id="" placeholder="说点什么..." v-model="comment"  @confirm="addmsg">
			<uni-icons type="heart" size="20" style="margin-left: 100rpx;"></uni-icons>
			<text style="width: 40rpx;">111</text>
			<uni-icons type="chat-filled" size="20"></uni-icons>
			<text style="width: 40rpx;">999</text>
			<uni-icons type="redo" size="20"></uni-icons>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				items:[],
				pageIndex:1,//分页器页码
				pageSize:10,//分页器每页显示数据的条数
				message:[],
				comment:'',
				time:'',
				userId:'',
				imageUrl:"http://mnxc.xyz:8080/common/download?name="
			}
		},
		onLoad(options) {
			if (!options) {
				return ;
			}
			this.pageIndex=options.page;
			this.pageSize=options.pageSize;
			// console.log(JSON.parse(decodeURIComponent(options)));
			this.getdata(options.index);
		},
		onShow() {
			this.userId=uni.getStorageSync('userId')
		},
		methods: {
			addmsg: function(event) {
				if(this.userId == ''){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					this.message = '';
				}
				else{
					this.comment = event.target.value
					this.time = this.getTime();
				// console.log(event.target.value)
					http({
						url:`/message`,
						method:'post',
						data:{
							msgCont:this.comment,
							articleId:this.titleid,
							userId:this.userId,
							msgTime:this.time
						},
						success:(res)=>{
							console.log(res.data.data);
							this.comment = '';
							this.getmessage();
							// console.log(this.alist);
						}
					})
				}
			},
			getTime:function(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day+ ' ' + hour + ':' + minute + ':' + second;
				return timer;
			},
			back(){
				uni.navigateBack({
					delta: 2
				})
			},
			getdata(id){
				http({
					url:'/lunch/page',
					method:'GET',
					params:{
						page:this.pageIndex,
						pageSize:this.pageSize
					},
					success:(res)=>{
						this.items=res.data.data.records[id];
						console.log(this.items);
						this.getmessage();
					}
				})
			},
			getmessage(){
				http({
					url:'/message/msgPlusByLunchId',
					method:'GET',
					params:{
						id:this.items.lunchId,
					},
					success:(res)=>{
						this.message=res.data.data;
						console.log(res.data.data);
					}
				})
			}
		}
	}
</script>

<style>
.title{
	display: flex;
	align-items: center;
	margin-top: 70rpx;
}
.header{
	height: 100rpx;
	display: flex;
	align-items: center;
	position: relative;
}
.header image{
	height: 60rpx;
	width: 60rpx;
	border-radius: 50%;
	margin: 0 20rpx;
}
.header text{
	font-size: 30rpx;
	font-weight: bold;
}
.header view{
	font-size: 30rpx;
	width: 130rpx;
	text-align: center;
	border: 1rpx solid #0055ff;
	color: #0055ff;
	right: 20rpx;
	border-radius: 5rpx;
	position: absolute;
}
.content{
	padding: 0 20rpx;
	width: 715rpx;
}
.content .ttitle{
	font-size: 45rpx;
}
.content .head{
	height: 70rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	position: relative;
}
.content .head image{
	height: 60rpx;
	width: 60rpx;
	border-radius: 50%;
}
.content .head .tttitle{
	padding: 0;
	margin: 0;
	margin-left: 20rpx;
	display: inline-block;
}
.content .head .tttitle view{
	padding: 0;
	margin: 0;
	display: block;
}
.content .head .tttitle view:nth-child(1){
	font-size: 27rpx;	
}
.content .head .tttitle view:nth-child(2){
	font-size: 22rpx;
}
.content .head .guanzhu{
	display: inline-block;
	background-color: #41c20c;
	color: #fff;
	font-size: 27rpx;
	width: 50px;
	height: 50rpx;
	line-height: 50rpx;
	text-align: center;
	border-radius: 20rpx;
	position: absolute;
	right: 20rpx;
}
.content .text1{
	margin-top: 20rpx;
	font-size: 38rpx;
}
.content .text1 text:nth-child(2){
	margin:0 10rpx;
	color: #41c20c;
}
.content .text2{
	margin-top: 40rpx;
	font-size: 38rpx;
}
.content .images{
	margin-top: 20rpx;
}
.content .images image{
	width: 100%;
}
.bottom{
	margin-top: 20rpx;
	border-top: 10rpx solid #dfdfdf;
}
.bottom .header{
	padding: 0 30rpx;
}
.bottom .header text{
	font-size: 30rpx;
	font-weight: bold;
}
.bottom .item{
	padding: 0 30rpx;
}
.bottom .item .head{
	height: 70rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	position: relative;
}
.bottom .item .head image{
	height: 60rpx;
	width: 60rpx;
	border-radius: 50%;
}
.bottom .item .head .tttitle{
	padding: 0;
	margin: 0;
	margin-left: 20rpx;
	display: inline-block;
}
.bottom .item .head .tttitle view{
	padding: 0;
	margin: 0;
	display: block;
}
.bottom .item .head .tttitle view:nth-child(1){
	font-size: 27rpx;	
}
.bottom .item .head .tttitle view:nth-child(2){
	font-size: 22rpx;
}
.bottom .item .bottomm{
	height: 50rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
}
.bottom .item .bottomm text{
	font-size: 30rpx;
}
.bottom .item .bottomm text:nth-child(1){
	color: #b3b3b3;
	font-size: 30rpx;
	padding: 0 30rpx;
}
.add{
	height: 100rpx;
	display: flex;
	align-items: center;
	border-top: 1px solid #cfcfcf;
}
.add text{
	font-size: 25rpx;
	margin-left: 5rpx;
}
.add input{
	border-radius: 20rpx;
	background-color: #e1e1e1;
	margin-left: 20rpx;
	font-size: 25rpx;
	width: 350rpx;
}

</style>
